<template>
  <div>
    <a-result :title="payStatus.text" :status="payStatus.status" :sub-title="`封签码:${order.seal_code}`" style="max-width: 560px; margin: 0 auto ;">
      <div class="information" id="page1">
        <div class="title">
          家乐洗
          <br />
          让生活更简单一点
        </div>
        <div class="content" style="margin-top:22px">
          <div class="left">门店名：</div>
          <div class="right">{{ order.store && order.store.name }}</div>
        </div>
        <div class="content">
          <div class="left">门店电话：</div>
          <div class="right">{{ order.store && order.store.mobile }}</div>
        </div>
        <div class="content">
          <div class="left">门店地址：</div>
          <div class="right">{{ order.store && order.store.address }}</div>
        </div>
        <div class="content" style="margin-top:22px">
          <div class="left">姓名：</div>
          <div class="right">{{ order.take_name }}</div>
        </div>
        <div class="content">
          <div class="left">电话：</div>
          <div class="right">{{ order.take_mobile }}</div>
        </div>
        <div class="content">
          <div class="left">订单号：</div>
          <div class="right">{{ order.out_trade_no }}</div>
        </div>
        <div class="content">
          <div class="left">支付金额：</div>
          <div class="right">
            <span class="money">{{ order.price }}</span>元
          </div>
        </div>
        <div class="img">
          <img src="../../assets/gzh.png" alt="" />
        </div>
      </div>
      <template slot="extra">
        <a-button type="primary" @click="lodopPrint">打印</a-button>
        <a-button style="margin-left: 8px" @click="goOrder">分拣订单</a-button>
      </template>
    </a-result>
  </div>
</template>

<script>
import { isIE } from '@/utils/util'
import { getJCP } from '@/assets/js/jcp-vue.js'

export default {
  name: 'ClothesOfflinePaySuccess',
  props: {
    order: {
      type: Object,
      default: () => { }
    }
  },
  data () {
    return {
      loading: false
    }
  },
  computed:{
    payStatus(){
      const statusMap = this.order.status === 0 ? {
        text:'暂未支付',
        status:'error'
      } : {
        text:'支付成功',
        status:'success'
      }
      console.log(statusMap)
      return statusMap
    }
  },
//   mounted () {
//     var jcp = getJCP()
//     jcp.getPrinters((printers) => {
//       console.log(`当前系统可用的打印机为:${printers.join(',')}`)
//       jcp.getDefaultPrinters((printer) => {
//         window.alert(`当前系统可用的打印机为:${printers.join(',')},默认打印机为:${printer}`)
//         console.log(`当前系统可用的打印机为:${printers.join(',')},默认打印机为:${printer}`)
//       })
//     })
//   },
  methods: {
    goOrder () {
      this.$router.push({
        name: 'clothesOrderDetail',
        query: {
          seal_code: this.order.seal_code
        }
      })
    },
    doPrint () {
      const myDoc = {
        settings: {
          paperName: 'a4', // 纸张名称
          portrait: true, // 纵向
          printer: 'JLX-SPRT'
        },
        documents: document, // 打印页面(div)们在本文档中
        copyrights: '家乐洗  http://jialexi.top' // 版权声明必须
      }
      if (isIE()) {
        var jcp = getJCP()
        jcp.print(myDoc, false)
      } else {
        this.$message.warning('打印方法不支持当前浏览器,请更改为IE浏览器!')
      }
    },
    lodopPrint() {
      const refs = document.body.querySelector('#page1')
      const LODOP = getLodop()
      if (!LODOP) {
        return this.$message.warning('Web打印服务CLodop未安装启动,请下载安装')
      }
      this.CreateOneFormPage(refs.innerHTML)
    },
    CreateOneFormPage(htmlContent) {
      const LODOP = getLodop()
      LODOP.SET_LICENSES("", "90A778FDD8AD3D1EE7C8974D546D7596969", "", "");
      LODOP.PRINT_INIT('')
      LODOP.ADD_PRINT_HTM(0, 0, 350, 600, htmlContent)
      LODOP.PRINT()
    },
  }
}
</script>
<style lang="less" scoped>
.ant-result {
  padding: 0 24px;
}
.information {
  line-height: 22px;
  color: #333;
  .title {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }
  .img {
    text-align: center;
    margin-top: 23px;
    img {
      width: 102px;
      height: 102px;
    }
  }
  .content {
    display: flex;
    .left {
      flex: 3;
      flex-shrink: 0;
      width: 50%;
    }
    .right {
      flex: 5;
      width: 50%;
    }
    &:not(:last-child) {
      margin-bottom: 4px;
    }
  }
}
.money {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 14px;
}
</style>
